<% filter_values = filter_values_for_filter(filter) %>

<% if filter_values.any? %>
  <div
    class="st-accordion"
    data-controller="accordion"
    data-accordion-close-others-value="false">
    <%= link_to "##{filter.id}", class: "cursor-pointer uppercase flex items-center justify-between h-10 px-4 lg:px-10 text-sm tracking-widest focus:outline-hidden transition duration-150 ease-in-out #{'st-accordion__icon--opened' if permitted_products_params.dig(:filter, :options, filter.name).present?}", data: { action: 'accordion#toggle:prevent' } do %>
      <%= filter.presentation %>
      <%= render 'spree/shared/icons/chevron_down' %>
    <% end %>
    <div
      class='st-accordion__content'
      data-accordion-id="<%= filter.id %>"
      data-controller="searchable-list">
      <div class="relative mt-3 mx-4 lg:mx-10">
        <%= f.search_field :search,
                                    class: "w-full bg-accent focus:ring-primary focus:border-primary pl-10 border-none",
                                    placeholder: Spree.t(:search),
                                    data: { searchable_list_target: "input" } %>
        <span class="absolute left-0 top-0 flex items-center h-full pl-3">
          <%= render 'spree/shared/icons/search' %>
        </span>
      </div>
      <% main_options, rest_of_the_options = filter_values.partition.with_index { |_, i| i < 5 } %>
      <ul class="flex flex-col mt-3 px-4 lg:px-10">
        <% main_options.each do |option| %>
          <li>
            <%= f.label "filter_options_#{filter.name}_#{option.name}", class: "flex items-center gap-2 cursor-pointer group text-sm h-10", data: { searchable_list_target: "item", text: option.name } do %>
              <%= f.check_box "filter[options][#{filter.name}][]",
                {
                  id: "filter_options_#{filter.name}_#{option.name}",
                  checked: permitted_products_params.dig(:filter, :options, filter.name)&.include?(option.name),
                  class: "input-checkbox group-focus-within:outline"
                },
                option.name,
                nil %>
              <%= option.presentation %>
              <span class="opacity-50">
                (<%= products_count_for_filter(filter.name, option.id) %>)
              </span>
            <% end %>
          </li>
        <% end %>
      </ul>
      <% if filter_values.size > 5 %>
        <ul class='st-accordion__content flex flex-col gap-3 pt-3' data-accordion-id="more_<%= filter.name %>">
          <% rest_of_the_options.each do |option| %>
            <li class="px-4 lg:px-10">
              <%= f.label "filter_options_#{filter.name}_#{option.name}", class: "flex items-center gap-2 cursor-pointer group text-sm h-10", data: { searchable_list_target: "item", text: option.name } do %>
                <%= f.check_box "filter[options][#{filter.name}][]",
                  {
                    id: "filter_options_#{filter.name}_#{option.name}",
                    checked: permitted_products_params.dig(:filter, :options, filter.name)&.include?(option.name),
                    class: "input-checkbox group-focus-within:outline"
                  },
                  option.name,
                  nil %>
                <%= option.presentation %>
                <span class="opacity-50">
                  (<%= products_count_for_filter(filter.name, option.id) %>)
                </span>
              <% end %>
            </li>
          <% end %>
        </ul>
        <%= link_to Spree.t(:show_all), "#more_#{filter.name}",
                                class: "flex justify-between w-full st-accordion__icon text-sm font-semibold uppercase px-4 lg:px-10 #{'st-accordion__icon--opened' if permitted_products_params.dig(:filter, filter.name)&.present?} mt-3",
                                data: { action: 'accordion#toggle:prevent',
                                        accordion_opened_text_param: Spree.t(:show_less),
                                        accordion_closed_text_param: Spree.t(:show_all) } %>
      <% end %>
    </div>
  </div>
<% end %>
